<template>
	<view class="lay-c-c-col" style="height: 100%; width: 100%;">
		<view class="summary lay-c-c-col pd-t-xxl">
			<view class="hspace-xxl" style="height: 150rpx;"></view>
			<view class="text-sm pd-b-md text-bold">保证金账户</view>
			<view class="text-xxxl pd-md text-bold">{{balance}}</view>
		</view>
		<view class="lay-c-c mg-t-xxl mg-b-xxl flex1">
			<view class="bk-green white radius2 lay-c-c" style="width:400rpx; height:100rpx;" @click="doShowModal">充值</view>
		</view>
		<view class="lay-c-c pd-xxl">
			<view class="lay-c-c green" @click="goRechargeListPage">
				<view class="pd-lg"><text>充值记录</text></view>
			</view>
		</view>

		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view style="display: flex;justify-content: center; align-items: center; margin: 50rpx 0rpx; font-size: large; font-weight: bold;">
					<text>充值</text>
				</view>
				<view>
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 30rpx 0rpx;">
						<view style="width:150upx">金额：</view>
						<input style="width:400upx" type="number" v-model="input_money"></input>
					</view>
					
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 50rpx 0rpx;">
						<button style="width: 200rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white;" @click="onCancel">取消</button>
						<button style="width: 200rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white;" @click="onOK">立即充值</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	  getMerBalance, merExtractApply
	} from "@/api/fsh.js";
	
	import {
		rechargeWechat
	} from '@/api/user.js';
	
	export default {
		data() {
			return {
				balance: '',
				showModal: false,
				input_money: '',
			}
		},
		onLoad(options) {
			this.merId = options.merId;
			this.getMerBalance();
		},
		methods: {
			getMerBalance: function() {
				getMerBalance(this.merId, 2).then(res=>{
					this.balance = res.entity.balance;
				}).catch(err=>{
					console.error("getMerBalance fail:", err)
				})
			},
			
			goRechargeListPage() {
				uni.navigateTo({
					url: `./common_table?pageType=2&merId=${this.merId}`
				})
			},

			doShowModal: function() {
				this.showModal = true;
			},
			onCancel: function() {
				this.showModal = false;
			},
			onOK: function() {
				this.showModal = false;
				
				
				if(this.input_money < 0.01) {
					return that.$util.Tips({
						title: '请输入金额'
					});
				}
				
				let that = this;
				
				// #ifdef MP
				// let money = parseFloat(this.money);		
				rechargeWechat({
					price: this.input_money,
					type: 'routine',
					merId: this.mer_id
				}).then(res => {
					uni.hideLoading();
					let jsConfig = res.data.config;
					
					uni.requestPayment({
						timeStamp: jsConfig.timestamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.package,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						success: function(res) {
							that.getMerBalance();
							return that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							});
						},
						fail: function() {
							return that.$util.Tips({
								title: '支付失败'
							});
						},
						complete: function(res) {
							if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
								title: '取消支付'
							});
						}
					})
					
					
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
				// #endif
				
				
				// #ifdef H5 
				rechargeWechat({
					price: this.input_money,
					type: 'h5',
					merId: this.mer_id
				}).then(res => {
						if(res.data.type== 'h5'){
							let host = window.location.protocol+"//"+window.location.host;
							let url = `${host}/pages/users/user_money/index`
							let eUrl = encodeURIComponent(url)
							let locations = `${res.data.config.mweb_url}&redirect_url=${eUrl}` 
							setTimeout(() => {
								location.href = locations;
							}, 100);
						}else{
							const jsConfig = res.data.config;
							jsConfig.timeStamp = jsConfig.timestamp;
							that.$wechat.pay(jsConfig).then(res => {	
								that.getMerBalance();
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								});
							}).catch(res => {
								if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
									title: '取消支付'
								}, {	
									tab: 5,
									url: goPages + '?status=0'
								});
							})
						}
				}).catch(error=>{
					return that.$util.Tips({
						title: error
					});
				})
				// #endif
				
				// #ifdef APP-PLUS
				rechargeWechat({
					price: this.input_money,
					type: 'weixin',
					merId: this.mer_id
				}).then(res => {
					uni.hideLoading();
					uni.requestPayment({
						orderInfo: {
							...res.data.config,
							timeStamp: res.data.config.timestamp,
						},
						provider: 'wxpay',
						success(res) {
							that.getMerBalance();
							console.log(res);
							return that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							});
						},
						fail: function(rej) {
							console.log(rej);
							return that.$util.Tips({
								title: '支付失败'
							});
						},
						complete: function(res) {
							if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
								title: '取消支付'
							});
						}
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	@import "@/leui.scss";
	
	page {
		height: 100vh;
		width: 100%;
	}
	
	.summary {
		width: 100%;
	}
</style>
